Cabecera YAML: Opciones de salida


---
format: html
---
---
format: pdf
---
---
format: typst
---

typst es un nuevo sistema de composición tipográfica basado en marcas para ciencia.

Se le pueden agregar opciones. Las opciones deben estar debajo del formato principal (los espacios son importante y hay que respetarlos -identación-)

---
format: 
  html:
    toc: true
    code-fold: true
---

YAML es sensible a la identación

---
format:html # invalido, falta espacio luego de :
---

---
format: # invalido, se lee como formato ausente
html
---

---
format: 
  html: # valido pero necesita de opciones posteriores
---

El formato válido puede ser diferente según lo que se necesite.

format: html # valido - hay espacio

# valido - formato con opciones
format: 
  html:
    toc: true

Ventajas de RStudio


RStudio (también algunos otros editores como VSCode) integran entre sus herramientas la finalización enriquecida: podemos comenzar con una palabra y tabular (TAB) para completar, o presionar Ctrl + espacio para ver todas las opciones disponibles.

Texto y Markdown


Inicialmente y para el uso general conviene aprovechar el modo Visual de RStudio para incorporar marcas de lenguaje Markdown. Prácticamente todos los elementos incorporados con formato markdown aplican en los diferentes formatos de salida (HTML, pdf, etc)

Bloques

Pandoc y, por tanto, Quarto aceptan bloques Divs y Spans propios del HTML con sintaxis delimitada por :::

Estructura general:

  • Comienza y termina con igual número de : - mínimo de 3 :::
  • Agregar llaves para indicar el inicio de la clase {.class} o {varias-clase}
::: {.class}

Este contenido es el modificado

:::
::: {style="border-left:10px solid purple"}

Este contenido tiene un diseño de borde izquierdo violeta

:::

Este contenido tiene un diseño de borde izquierdo violeta

  • Se puede pensar en una división ::: como un <div> HTML pero que también sirve cuando la salida es en PDF.

Bloques de llamadas


El formato básico de un bloque de llamadas es:

::: {.callout-*}
## Título del bloque

Texto incluído
:::

donde el * se reemplaza por el tipo de bloque. Además se puede configurar la apariencia y si se muestra o no el ícono asociado.

Nota

Existen cinco tipos de leyendas, que incluyen: note (nota), tip (consejo), warning (advertencia), caution (precaución), e important (importante)

Bloques de llamadas


Advertencia

Estos bloques facilitan una forma sencilla de llamar la atención, por ejemplo, sobre esta advertencia.

Importante

Se pueden editar los titulos con doble #. Por ejemplo: ## Importante

Consejo

Tip o consejo dado

Precaución

Esto se encuentra bajo construcción

Bloques de línea (Spans)

Estructura general:

  • Encerrar el texto con corchetes [].
  • Agregar llaves para indicar el inicio de la clase {.class} o {varias-clases}

[texto]{.class}

  • Estos spans entre corchetes texto se pueden considerar como un <span .class>Texto</span> de HTML pero nuevamente estos son compatibles para aplicar atributos nativos de Pandoc/Quarto.


Este es un texto con formato [especial]{style=“color:orange;”}.

Este es un texto con formato especial.

  • Tanto los Divs como los Spans se pueden agregar desde el modo Visual: Format -> Div… y Format -> Span…

Figuras

  • Sintaxis básica de markdown

![Mar del Plata](images/mdp.jpg)

Mar del Plata

Figuras

  • Sintaxis markdown con opciones

![Mar del Plata](images/mdp.jpg){width=120%}

Mar del Plata

Figuras

  • Desde código R
```{r}
#| out-width: 50%
#| fig-align: right

knitr::include_graphics("images/mdp.jpg")
```

Fragmentos / columnas

![Mar del Plata](images/mdp.jpg){fig-align=“left”}

Mar del Plata

Las columnas se construyen con bloques Divs ::: columns y luego ::: {.column width=“50%”} para cada una de ellas (en este ejemplo que son 2). Cada bloque se cierra con :::

![](images/mdp2.png){fig-align=“right” .lightbox}

La opción .lightbox utiliza la librería de javascript GLightbox para mostrar un efecto sobre la imagen cuando pulsamos sobre ella.

Pestañas (TabSet)

```{r}
#| eval: false
head(datasets::iris)
```

Las pestañas son un bloque Divs especiales ::: {.panel-tabset} :::

El nombre de cada pestaña se establece con ## Nombre

Al ser dinámicas, solo funcionan en salidas HTML.

  Sepal.Length Sepal.Width Petal.Length Petal.Width Species
1          5.1         3.5          1.4         0.2  setosa
2          4.9         3.0          1.4         0.2  setosa
3          4.7         3.2          1.3         0.2  setosa
4          4.6         3.1          1.5         0.2  setosa
5          5.0         3.6          1.4         0.2  setosa
6          5.4         3.9          1.7         0.4  setosa

Enlaces web


Existen varios tipos de “enlaces” o hipervínculos.


Markdown

Se pueden insertar links en formato Markdown vinculados 
a un texto como este de [Quarto](https://quarto.org/), 
URL directas como <https://www.ine.gov.ar/> y 
enlaces a [otros lugares](#docu-estaticos-title) 
en el mismo documento. 
La sintaxis es similar a incrustar un imagen en línea: 
![Nombre](imagen.png). 

Salida

Se pueden insertar links en formato Markdown vinculados a un texto como este de Quarto, URL directas como https://www.ine.gov.ar/ y enlaces a otros lugares en el mismo documento. La sintaxis es similar a incrustar un imagen en línea: Logo INE.

Listas


Listas sin orden:

Markdown:

-   Lista sin orden       
    -   sub-item 1         
    -   sub-item 1         
        -   sub-sub-item 1 

Salida

  • Lista sin orden
    • sub-item 1
    • sub-item 1
      • sub-sub-item 1

Listas ordenadas:

Markdown:

1. Lista ordenada            
2. item 2                  
   i. sub-item 1          
      a.  sub-sub-item 1

Salida

  1. Lista ordenada
  2. item 2
    1. sub-item 1
      1. sub-sub-item 1

Citas


Markdown:

> Cambiemos nuestra actitud tradicional hacia la construcción 
> de programas: en lugar de imaginar que nuestra tarea principal
> es indicarle a una computadora qué hacer, concentrémonos más
> bien en explicar a los seres humanos lo que queremos que haga
> una computadora. - Donald Knuth


Salida:

Cambiemos nuestra actitud tradicional hacia la construcción de programas: en lugar de imaginar que nuestra tarea principal es indicarle a una computadora qué hacer, concentrémonos más bien en explicar a los seres humanos lo que queremos que haga una computadora. - Donald Knuth

Tablas


Tablas Markdown

Markdown:

| Derecha | Izquierda | Predeterminado | Centrado |
|--------:|:----------|----------------|:--------:|
|    12   |    12     |       12       |    12    |
|   123   |   123     |      123       |   123    |
|     1   |     1     |        1       |     1    |


Salida:

Derecha Izquierda Predeterminado Centrado
12 12 12 12
123 123 123 123
1 1 1 1

Tablas Grid (cuadrícula)


Las tablas cuadrícula son un tipo más avanzado de tablas de Markdown que permiten otros elementos (múltiples párrafos, bloques de código, listas, etc.)


Markdown:

+---------------+---------------+--------------------+
| Formato       | Extensión     | Ventajas           |
+===============+===============+====================+
| Documento     | pdf           | - Seguro           |
| portable      |               | - Universal        |
+---------------+---------------+--------------------+
| Word          | docx          | - Editable         |
|               |               | - Universal        |
+---------------+---------------+--------------------+

: Ejemplo tabla cuadrícula 

Tablas Grid (cuadrícula)


Salida:


Ejemplo tabla cuadrícula
Formato Extensión Ventajas
Documento portable pdf
  • Seguro
  • Universal
Word docx
  • Editable
  • Universal

Tablas cuadrícula: Alineación


  • Las alineaciones se pueden especificar como en las tablas anteriores, colocando dos puntos en los límites de la línea de separación después del encabezado:
+--------------------+---------------+--------------------+
| Derecha            | Izquierda     | Centrado           |
+===================:+:==============+:==================:+
| Documento portable | pdf           | -  Seguro          |
+--------------------+---------------+--------------------+


  • Para tablas sin encabezado, los dos puntos van en la línea superior:
+--------------:+:--------------+:------------------:+
| Derecha       | Izquierda     | Centrado           |
+---------------+---------------+--------------------+

Tablas cuadrícula: Creación


  • Tengamos en cuenta que las tablas cuadrícula son bastante complicadas de escribir con un editor de texto plano porque, a diferencia de las tablas comunes, los indicadores de columna deben alinearse.


  • ¡El Editor Visual puede ayudar a crear estas tablas! para profundizar ver Guía Quarto


Fórmulas


Al igual que en RMarkdown se puede insertar fórmulas matemáticas Latex en linea o en imagen completa, utilizando $ o $$ según corresponda.

  • Este es un ejemplo de formula en linea \(\sqrt{\frac{\alpha}{2}}\)
$\sqrt{\frac{\alpha}{2}}$


  • La siguiente es una formula completa:

\[ R(t)= A \left(\frac{E_0}{\rho_0}\right)^{1/5}t^{2/5} \]

$$
R(t)= A \left(\frac{E_0}{\rho_0}\right)^{1/5}t^{2/5}
$$

Caracteres especiales, emojis y listas de definiciones


En el modo Visual se pueden insertar facilmente caracteres especiales de distinto tipo, emojis y listas de términos. Por ejemplo:


Caracteres especiales:

② ≋ 𝄞 ⍾ ◴ ⭆


Emojis:

😀 🥶 👍 🤡


Listas de definición

Clase en programación orientada a objetos

Es una plantilla que define las características y comportamientos de una entidad

Diagramas

Quarto tiene soporte nativo para incrustar diagramas Mermaid y Graphviz . Esto permite crear diagramas de flujo, diagramas de secuencia, diagramas de estado, diagramas de Gantt y otros utilizando una sintaxis de texto plano inspirada en Markdown.

```{{mermaid}}
flowchart LR
  A[Inicio] --> B(Pre-proceso)
  B --> C{Decisión}
  C --> D[Resultado 1]
  C --> E[Resultado 2]
```